import './index.less'; // 导入Less样式文件

interface NoDataProps {
    /** 显示的提示文字 */
    text?: string;
    /** 自定义图标URL（可选） */
    iconUrl?: string;
    /** 额外的容器类名（可选） */
    className?: string;
}

/**
 * 用于空状态显示的组件，默认包含图标和"暂无数据"文字。
 * 样式完全由Less文件控制，适配postcss-px-to-viewport-8-plugin进行大屏适配。
 */
const NoData: React.FC<NoDataProps> = ({
    text = '暂无数据',
    iconUrl,
    className = ''
}) => {
    return (
        <div className={`no-data-container ${className}`}>
            <div className="no-data-content">
                <div className="no-data-icon-wrapper">
                    {iconUrl ? (
                        <img
                            src={iconUrl}
                            alt="no-data"
                            className="no-data-custom-icon"
                        />
                    ) : (
                        <DefaultNoDataIcon />
                    )}
                </div>
                <p className="no-data-text">{text}</p>
            </div>
        </div>
    );
};

// 默认图标组件
const DefaultNoDataIcon: React.FC = () => {
    return (
        <svg
            className="no-data-default-icon"
            viewBox="0 0 64 64"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
        >
            {/* 这是一个简单的文档图标，您可以根据需要替换或设计更复杂的SVG */}
            <path
                d="M32 8C18.745 8 8 18.745 8 32s10.745 24 24 24 24-10.745 24-24S45.255 8 32 8zm0 44c-11.046 0-20-8.954-20-20s8.954-20 20-20 20 8.954 20 20-8.954 20-20 20z"
                fill="currentColor" // 使用currentColor以便通过CSS控制颜色
            />
            <path
                d="M40 28H24c-1.1 0-2-.9-2-2s.9-2 2-2h16c1.1 0 2 .9 2 2s-.9 2-2 2zm-8 8H24c-1.1 0-2-.9-2-2s.9-2 2-2h8c1.1 0 2 .9 2 2s-.9 2-2 2z"
                fill="currentColor"
            />
        </svg>
    );
};

export default NoData;